<template>
  <map show-location="true" id="mymap" style="width: 100vw; height: 100vh" :longitude="longitude" :latitude="latitude"
    :include-points='incPoints' :markers="markers" :scale="mapScale" :show-compass="false" enable-overlooking="ture"
    enable-rotate="ture" enable-zoom="ture" enable-scroll="ture" @markertap="markertap">
  </map>
</template>

<script>
  import config from '@/config';
  import { parseTime } from '@/utils/ruoyi';
  import { getCorpAreaConfig, addWaybillgps, addViolation } from '@/api/me.js';
  //先获取经纬度，然后再根据经纬度通过腾讯地图获取地址名称

  export default {
    name: 'map-com',
    props: {
      focus: false,
      itemData: {}
    },
    data() {
      return {
        incPoints: [{ latitude: 37.69965, longitude: 109.007401 }],
        mapCtx: null,
        latitude: 37.879511,
        longitude: 109.405092,
        markers: [], // 地图上markers列表
        mapScale: 8, // 地图默认放大倍数
      };
    },
    computed: {
      iconPath() {
        return config.baseImgUrl + '/mst-marker.png';
      },
      activeIconPath() {
        return config.baseImgUrl + '/mst-active-marker.png';
      }
    },
    methods: {
      clearMarkerActive() {
        this.markers.forEach(item => {
          item.iconPath = this.iconPath
        })
      },
      markertap(e) {
        let title = '';
        this.markers.forEach(item => {
          if (item.id == e.markerId) {
            title = item.title
            item.iconPath = this.activeIconPath
          } else {
            item.iconPath = this.iconPath
          }
        })
        this.$emit('markerTap', title)
      },
      assemblyData() {
        this.itemData.forEach((item, index) => {
          if (item.lat && item.lon) {
            this.markers.push({
              id: index,
              width: 50,
              height: 50,
              latitude: item.lat,
              longitude: item.lon,
              iconPath: this.iconPath,
              title: item.collieryName,
              stationName: item.locationName,
            })
          }
        })
        // if (this.markers.length > 0) {
        //   this.incPoints.push({
        //     latitude: this.markers[0].latitude,
        //     longitude: this.markers[0].longitude,
        //   })
        // }
        this.includePot()
      },
      includePot() {
        this.mapCtx.includePoints({
          padding: [70],
          points: this.incPoints
        })
      }
    },
    onReady() {
      this.mapCtx = wx.createMapContext('mymap');
      this.assemblyData()
    },
    onHide() {
      console.log('退出地图界面');
    }
  };
</script>
<style lang="scss" scoped></style>